﻿<!--PoolBox Vue组件声明 -->
<!--X-Template 组件模板 -->
<script type="text/x-template" id="pool-box-component-template">
    <div class="pool-box">
       <div class="pools-container" v-if="pools.length>0">
           <pool v-for="(item,index) in pools" :key="item.key"
                                               :id="item.id" 
                                               :name="item.name"
                                               :selected-id="selectedId"
                                               :start-time="item.startTime"
                                               :end-time="item.endTime"
                                               :max-count="item.maxCount"
                                               :current ="item.current"
                                               :allow-over-flow="item.allowOverFlow"
                                               :device-id="deviceId"
                                               :date="date"
                                               :plan-pool-id="item.planPoolId"
                                               v-on:click-pool="clickPoolHandler">

           </pool>
       </div>
       <div class="no-pools" v-else  >
           <span>暂无号池</span>
       </div>
    </div>
</script>
<script>
    var  PoolBoxComponent = {
        components:{
            'pool':PoolComponent
        },
        props:{ // 组件属性
            date:Date,
            deviceId:String,
            value:{
               type:String,
               default:null
            },
            selectedId:{
               type:String,
               default:null
            }
        },
        template:'#pool-box-component-template', // 对应的模板
        watch:{
            date(value){
                const cvm = this;
                if(value && cvm.deviceId){
                    cvm.loadPools();
                }
                else{
                    cvm.pools=[];
                    cvm.$emit('pool-selected',null);
                }
            },
            deviceId(value){
                const cvm =this;
                if(value && cvm.date){
                    cvm.loadPools();
                }else{
                    cvm.pools=[];
                    cvm.$emit('pool-selected',null);
                }
            }
        },
        computed:{
            poolsCondition(){
                var cvm =this;
                return {
                    date:cvm.date,
                    deviceId:cvm.deviceId
                }
            }
        },
        data:function(){
            return {
               pools:[]
            }
        },
        methods:{
            loadPools(){
               var cvm = this;
                if(cvm.date && cvm.deviceId){
                     abp.ajax({
                       type:'post',
                       url:`/api/manual-appoint/get-pool-list`,
                       data:JSON.stringify({
                            date:cvm.date,
                            deviceId:cvm.deviceId
                       })
                    }).then(res=>{
                        if(res.code===0){
                            cvm.pools=res.data;
                        }
                    })
                }
            },
            clickPoolHandler(param){
                var cvm =this;
                cvm.$emit('pool-selected',param);
            }   
        },
        created(){
           var cvm = this;
           if(cvm.date && cvm.deviceId){
               cvm.loadPools();
           }
        }
    }
</script>
<style>
    .pool-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: 15px;
    }
        .pool-box .pools-container{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            width:100%;
            gap:10px;
        }

    .no-pools {
        padding-top:150px;
        text-align:center;
    }

</style>